<template>
  <div class="footer">
    <el-input placeholder="截图路径" v-model="ssUrl" class="inner-input">
      <el-button class="footer-btn" size="mini" slot="prepend" @click="copy">复制</el-button>
    </el-input>
    <div class="version">{{appVersion}}</div>
  </div>
</template>

<script>
import { clipboard } from 'electron'

export default {
  name: 'bjsFooter',
  data () {
    return {}
  },
  methods : {
    copy () {
      clipboard.writeText(this.ssUrl);
    }
  },
  computed: {
    ssUrl () {return this.$store.state.footer.screenshotUrl;},
    appVersion () {return this.$GLOBAL.SYSTEM.VERSION}
  },
  mounted: function () {}
}
</script>

<style scoped lang="scss">
  .footer {
    @include flex(row,flex-start,center);
    width: 100%;
  }

  .inner-input /deep/ .el-input__inner{
    @include themeBgColor($theme-bg-color-light,$theme-bg-color-night);
    @include themeColor(#aeaeae,#787878);
    @include themeBorder(1px, #d4d4d4,#1d1d1d,'around');
    height: 25px;
    font-size: 12px;
    border-radius: 0;
    transition: border 0.3s;
  }

  .inner-input /deep/ .el-input__inner:focus {
    @include themeBorder(1px, $theme-color-light-5, #000000,'around');
  }

  .inner-input /deep/ .el-input-group__prepend {
    @include themeColor($theme-color-light,$theme-color-night-dark);
    @include themeBorder(1px,#d4d4d4,#1d1d1d,'top left bottom');
    @include themeBgColor(#ffffff,#2D2B30);
    border-radius: 0;
    font-size: 12px;
    [data-theme="night"] & {
      overflow: hidden;
    }
  }

  .inner-input /deep/ .el-input-group__prepend:hover {
    @include themeBgColor($theme-color-light-1,$theme-bg-color-night-1);
  }

  .version {
    @include themeColor($theme-color-light,$theme-color-night-dark);
    margin-left: 20px;
  }

  .footer-btn {
    @include themeColor($theme-color-light,$theme-color-night-dark);
  }
</style>
